<template>
  <div class="list">
    <div class="head">
      <div class="id">日期</div>
      <div class="username">评语</div>
    </div>
    <div v-for="(item, index) in evaluateList" :key="index" class="user">
      <div class="up">
        <div class="info">
          <div class="id">{{ item.createTime }}</div>
          <div class="username">{{ item.content }}</div>
          <div class="createdate">
            <el-tag
              v-if="item.type === '非常满意'"
              type="success"
              style="width: 70px; text-align: center"
              >非常满意</el-tag
            >
            <el-tag
              v-if="item.type === '满意'"
              type="info"
              style="width: 70px; text-align: center"
              >满意</el-tag
            >
            <el-tag
              v-if="item.type === '不满意'"
              type="danger"
              style="width: 70px; text-align: center"
              >不满意</el-tag
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { workerEvaluate } from "@/api/worker";
export default {
  data() {
    return {
      evaluateList: {},
    };
  },
  mounted() {
    this.getEvaluateList();
  },
  methods: {
    // 获得评价列表
    getEvaluateList() {
      workerEvaluate(localStorage.getItem("wid")).then((res) => {
        res.msg = "评价列表";
        for (var i = 0; i < res.data.length; i++) {
          res.data[i].createTime = this.formatDate(res.data[i].createTime);
        }
        console.log(res);
        this.evaluateList = res.data;
      });
    },

    // 删除按钮
    deleteClick(item) {
      deleteActivity(item.id).then((res) => {
        // console.log(res)
        this.$message.success("删除成功！");
      });
      setTimeout(() => {
        this.activityList();
      }, 100);
    },

    // 日期格式化
    formatDate(dateint) {
      var date = new Date(parseInt(dateint));
      var str = date.getFullYear() + "-";
      if (date.getMonth() < 10) {
        str += "0";
      }
      str += date.getMonth() + 1 + "-";
      if (date.getDate() < 10) {
        str += "0";
      }
      str += date.getDate() + " ";
      if (date.getHours() < 10) {
        str += "0";
      }
      str += date.getHours() + ":";
      if (date.getMinutes() < 10) {
        str += "0";
      }
      str += date.getMinutes() + ":";
      if (date.getSeconds() < 10) {
        str += "0";
      }
      str += date.getSeconds();
      return str;
    },
  },
};
</script>

<style lang='scss' scoped>
.list {
  width: 1100px;
  height: 850px;
  background-color: #fff;
  margin: auto;
  position: relative;
  top: 25px;
  overflow-x: hidden;
  overflow-y: auto;
  .avatar {
    width: 300px;
  }
  .head {
    position: relative;
    height: 50px;
    border-bottom: 1px solid #000;
    div {
      font-size: 20px;
      float: left;
      color: rgb(85, 85, 85);
      font-weight: bold;
      padding-top: 15px;
    }
    .id {
      position: absolute;
      left: 50px;
      width: 80px;
    }
    .username {
      position: absolute;
      left: 400px;
    }
    // .nickname {
    //   position: absolute;
    //   left: 350px;
    // }
    // .createdate {
    //   position: absolute;
    //   left: 680px;
    // }
    // .handle {
    //   position: absolute;
    //   left: 850px;
    // }
  }
  .user {
    width: 1100px;
    height: auto;
    float: left;
    // border-bottom: 1px solid #000;

    .up {
      width: 1100px;
      height: 50px;
      border-bottom: 1px solid #000;
      .icon {
        cursor: pointer;
        float: left;
        padding: 13px 15px;
      }
      .info {
        position: relative;
        div {
          float: left;
          padding: 12px 0;
        }
        .id {
          position: absolute;
          left: 50px;
          // width: 80px;
        }

        .username {
          position: absolute;
          left: 400px;
          width: 270px;
          line-height: 40px;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        .createdate {
          position: absolute;
          left: 820px;
        }
        // .handle {
        //   position: absolute;
        //   left: 850px;
        //   top: 5px;
        // }
      }
    }
  }
}
</style>